<template>
	<view class="page">
		<view class="page-header">
			<cc-beautyTabs :tabList="Tabs.list" @tabChange="PageTabsAndSwiperChange('tabs',$event)"
				:active="Tabs.current"></cc-beautyTabs>
		</view>
		
		     <scrollTabs @tabClick="workHandler" :tabData="tabsOptions" :config="{ showUnderLine: false }"></scrollTabs>
		
		<swiper class="page-swiper" :current="Tabs.current" circular :indicator-dots="false"
			@change="PageTabsAndSwiperChange('swiper',$event)" :duration="Data.SwiperDuration">
			<swiper-item class="swiper-item page-index">
				<view class="page-banner">
					<wd-swiper value-key="url" :indicator="{ type: 'dots-bar' }" v-model:current="Banner.current"
						:list="Banner.list" :autoplay="Banner.Attr.autoplay" :direction="Banner.Attr.direction"
						:displayMultipleItems="Banner.Attr.displayMultipleItems" :interval="Banner.Attr.interval"
						:loop="Banner.Attr.loop" :indicatorPosition="Banner.Attr.indicatorPosition"
						:easingFunction="Banner.Attr.easingFunction"></wd-swiper>
				</view>

				<view class="Notice">
					<!-- 基本使用 -->
				</view>

				<!-- 功能区 -->
				<IndexOptions :data="OptionsList"></IndexOptions>

				<!-- 服务器信息 -->
				<IndexSystem :Request="Request" :System="System"></IndexSystem>

				<view class="header-card" v-for="(e,index) in OperationList">
					<view class="card-header">
						<view class="card-header-left">
							<text class="card-header-left-title">{{e.title}}</text>
							<wd-icon name="help-circle" />
						</view>
						<view class="card-header-right">
						</view>
					</view>
					<view class="card-content">
						<view class="card-content-li" v-for="(k,index) in e.list">
							<text class="card-content-li-title">{{k.title}}</text>
							<text class="card-content-li-value">{{k.value || 0}}</text>
							<text class="card-content-li-tips">{{k.contrast || "--"}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<ManageList :Manage="Manage"></ManageList>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	
	
	import scrollTabs from '@/components/wxg-tabs/wxg-tabs.vue';
	import ManageList from './components/manage.vue'
	import IndexSystem from './components/system.vue'
	import IndexOptions from './components/options.vue'

	import overallRequest from "@/utool/http/http.js"
	import {
		computed,
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from "@dcloudio/uni-app"
	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	const userInfo = computed(() => userStore.userInfo)
	import useManageStore from '@/stores/store/manage.js'
	const manageStore = useManageStore()
	
	const Tabs = computed(() => manageStore.Tabs)

	const Request = computed(() => manageStore.Request)

	const SMS = computed(() => manageStore.SMS)

	const System = computed(() => manageStore.System)

	const Notice = computed(() => manageStore.Notice)

	const tabList = computed(() => manageStore.tabList)

	const Manage = computed(() => manageStore.Manage)

	const Banner = computed(() => manageStore.Banner)

	const OptionsList = computed(() => manageStore.Options.list)

	const OperationList = computed(() => manageStore.Operation.list)

	const Data = reactive({
		TabSwiprtCurrent: 0,
		SwiperDuration: 400
	})
	
	function PageTabsAndSwiperChange(mode, e) {
		let detail = e.detail
		let index = null
		if (mode == "swiper") {
			index = detail.current
		} else if (mode == "tabs") {
			index = detail.index
		}
		manageStore.PageChangeUpdate(index)
	}
	onLoad(() => {
		manageStore.GetData()
	})
</script>

<style scoped lang="scss">

	$gap:25rpx;
	
	page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		height: 100%;
		/* background: linear-gradient(180deg, rgba(82, 140, 232, 0.32816876750700286) 21%, rgba(254, 254, 254, 1) 55%); */
	}

	.page-index {
		background: #f4f6f8;
	}

	.page-banner {
		padding: $gap 3%;
	}

	.page-header {
		padding-top: 0rpx;
		padding-bottom: 0rpx;
		position: sticky;
		top: 0rpx;
		left: 0rpx;
	}

	.header-card {
		border-radius: 12px;
		padding: 15rpx 0rpx;
		padding-bottom: $gap;
		width: 94%;
		margin: 0rpx 3%;
		box-sizing: border-box;
		background-color: white;
		margin-bottom: $gap;
		color: rgba(128, 128, 128, 0.4);
		box-sizing: border-box;
	}

	.card-header {
		display: flex;
		align-items: center;
		padding: 0rpx 40rpx;
		padding-top: 15rpx;
	}

	.card-header-left {
		flex: 1;
		color: #000;
		font-size: 29rpx;
	}

	.card-header-left-title {
		margin-right: 6px;
	}

	.card-header-right {
		width: 98rpx;
		height: 50rpx;
		background-color: #c3c3c322;
		border-radius: 10rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 20rpx;
		display: flex;
		align-items: center;
	}

	.card-content {
		display: flex;
		flex-wrap: wrap;
	}

	.card-content-li {
		width: 25%;
		padding: 20rpx 0rpx;
		display: flex;
		flex-direction: column;
		color: #000;
		font-size: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.card-content-li-50 {
		width: 50%;
		background-color: #c3c3c322;
	}

	.card-content-li-title {
		margin-bottom: 10rpx;
	}

	.card-content-li-value {
		margin-bottom: 10rpx;
	}

	.card-content-li-tips {
		color: gray;
	}

	.title-group {
		margin-left: 5%;
		display: inline-block;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 28rpx;
		padding: 0rpx 28rpx;
		position: relative;
		margin-bottom: 10rpx;
	}

	.title-group-chunck {
		position: absolute;
		bottom: 6rpx;
		left: 28rpx;
		display: inline-block;
		width: 60rpx;
		height: 10rpx;
		background-color: #4e9cea73;
	}
</style>